<template>
  <div class="whole-page two">
    <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div v-for="(item,index) in li" :key="index">
        <div>{{index}}</div>
        <router-link to="/bar">下一层</router-link>
        <router-link to="/">返回</router-link>
        <h1>第二层</h1>
      </div>
    </van-pull-refresh>
    </van-list>
  </div>
</template>
<script>
export default {
  data() {
    return {
      li: 10,
        loading: false,
      finished: false,
       isLoading: false,
      error: false,
      loading: false
    };
  },

  methods: {
     onLoad() {
      // 异步更新数据
      setTimeout(() => {
      
          this.li+=10 
        
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.li>= 40) {
          this.finished = true;
        }
      }, 500);
    },
      onRefresh() {
      setTimeout(() => {
        // this.$toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 500);
    }
  },
  
  
};
</script>

<style lang="less" scoped>
.two {
  // background-color: tomato;
  height: 100%;
  width: 100%;
  padding-bottom: 90px;
  box-sizing: border-box;
  overflow: auto;
}
.posi {
  position: fixed;
  width: 100%;
  height: 22px;
  background: red;
  top: 0;
}
</style>

